<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:pe="http://primefaces.org/ui/extensions"
                xmlns:of="http://omnifaces.org/functions"
                template="/templates/mainLayout.xhtml">
    
    <ui:define name="title">vBox-Home</ui:define>
    <ui:define name="menu"/>
    <ui:define name="content">
        <pe:layoutPane position="center">  
            <f:facet name="header">
                <h:outputText id="leftLayoutHeader" value="#{homeBean.leftAccount.provider.name} - #{homeBean.leftAccount.name}"/>
            </f:facet>
            <p:graphicImage id="leftPollStatus" value="#{resource['images:ajaxloading.gif']}" style="display: none;"/>
            
            <h:form id="leftMenuForm">
                <p:menubar style="margin-bottom: 5px;">
                    <p:menuitem value="New folder" icon="ui-icon-folder-collapsed"/>
                    <p:menuitem value="Upload" icon="ui-icon-arrowthick-1-n"/>
                    <p:menuitem value="Download" icon="ui-icon-disk"/>
                    <p:menuitem value="Delete" icon="ui-icon-trash"/>
                    <p:menuitem value="Search" icon=" ui-icon-search"/>
                    <p:menuitem value="Refresh" actionListener="#{homeBean.reloadPanelAction('left')}" icon="ui-icon-refresh"
                                update=":leftPanelForm:leftAccount"/>
                    <f:facet name="options">
                        <p:selectOneMenu id="leftAccountChange" value="#{homeBean.changedLeftAccountName}">
                            <f:selectItems value="#{homeBean.accountList}" var="account" itemLabel="#{account.name}" itemValue="#{account.name}"/>
                            <p:ajax event="change" process="leftAccountChange" update=":leftPanel, :leftLayoutHeader" listener="#{homeBean.handleLeftAccountChange}"/>
                        </p:selectOneMenu>
                    </f:facet>
                </p:menubar>
            </h:form>
            
            <p:outputPanel id="leftPanel" deferred="true">
                <h:form id="leftPanelForm">
                    <p:contextMenu for="leftAccount">  
                        <p:menuitem value="New folder" icon="ui-icon-folder-collapsed"/>
                        <p:separator/>
                        <p:menuitem value="Share" icon="ui-icon-person"/>
                        <p:separator/>
                        <p:menuitem value="Upload" icon="ui-icon-arrowthick-1-n"/>
                        <p:menuitem value="Download" icon="ui-icon-disk"/>
                        <p:separator/>
                        <p:menuitem value="Rename" icon="ui-icon-pencil"/>
                        <p:menuitem value="Delete" icon="ui-icon-trash"/>
                        <p:menuitem value="Move to" icon="ui-icon-transfer-e-w"/>
                        <p:separator/>
                        <p:menuitem value="Search" icon=" ui-icon-search"/>
                        <p:separator/>
                        <p:menuitem value="Refresh" actionListener="#{homeBean.reloadPanelAction('left')}" icon="ui-icon-refresh"
                                update=":leftPanelForm:leftAccount"/>
                    </p:contextMenu>
                    
                    <p:poll global="false" interval="60" update="leftAccount" listener="#{homeBean.autoUpdateAction('left')}"
                            onstart="$(PrimeFaces.escapeClientId('leftPollStatus')).css('display','inline')"
                            oncomplete="$(PrimeFaces.escapeClientId('leftPollStatus')).css('display','none')"/>
                    
                    <p:treeTable id="leftAccount" value="#{homeBean.leftRoot}" var="file" resizableColumns="true"
                                 selectionMode="single" selection="#{homeBean.leftSelectedNode}">
                        <p:ajax event="expand" listener="#{homeBean.onNodeExpand}" update="leftAccount"/>
                        <p:ajax event="collapse" listener="#{homeBean.onNodeCollapse}"/>
                        <f:facet name="header">#{homeBean.leftAccount.provider.name} - #{homeBean.leftAccount.name}</f:facet>
                        <p:column>  
                            <f:facet name="header">Name</f:facet>
                            <f:verbatim rendered="#{file.folder}">
                                <span class="ui-treetable-toggler ui-icon ui-icon-folder-collapsed" />
                            </f:verbatim>
                            <f:verbatim rendered="#{!file.folder}">
                                <span class="ui-treetable-toggler ui-icon ui-icon-document" />
                            </f:verbatim>
                            <h:outputText value="#{file.name}"/>
                        </p:column>

                        <p:column>  
                            <f:facet name="header">Modified Date</f:facet>  
                            <h:outputText value="#{of:formatDate(file.modifiedDate, 'yyyy-MM-dd HH:mm:ss')}" />  
                        </p:column>

                        <p:column width="50px">  
                            <f:facet name="header">Size</f:facet>  
                            <h:outputText value="#{of:formatBytes(file.size)}" />  
                        </p:column>  

                        <p:column>  
                            <f:facet name="header">Kind</f:facet>  
                            <h:outputText value="Folder" rendered="#{file.folder}"/>
                            <h:outputText value="#{file.mimeType}"/>
                        </p:column>

                        <f:facet name="footer">
                            Total: #{of:formatBytes(homeBean.leftStorage.quotaBytesTotal)} - Used: #{of:formatBytes(homeBean.leftStorage.quotaBytesUsed)}
                        </f:facet>
                    </p:treeTable>
                </h:form>
            </p:outputPanel>
        </pe:layoutPane>  
        <pe:layoutPane position="east" size="50%">  
            <f:facet name="header">
                <h:outputText id="rightLayoutHeader" value="#{homeBean.rightAccount.provider.name} - #{homeBean.rightAccount.name}"/>
            </f:facet>
            <p:graphicImage id="rightPollStatus" value="#{resource['images:ajaxloading.gif']}" style="display: none;"/>
            
            <h:form id="rightMenuForm">
                <p:menubar style="margin-bottom: 5px;">
                    <p:menuitem value="Refresh" actionListener="#{homeBean.reloadPanelAction('right')}" icon="ui-icon-refresh"
                                update=":rightPanelForm:rightAccount"/>
                    <f:facet name="options">  
                        <p:selectOneMenu id="rightAccountChange" value="#{homeBean.changedRightAccountName}">
                            <f:selectItems value="#{homeBean.accountList}" var="account" itemLabel="#{account.name}" itemValue="#{account.name}"/>
                            <p:ajax event="change" process="rightAccountChange" update=":rightPanel, :rightLayoutHeader" listener="#{homeBean.handleRightAccountChange}"/>
                        </p:selectOneMenu>
                    </f:facet>
                </p:menubar>
            </h:form>
            
            <p:outputPanel id="rightPanel" deferred="true">
                <h:form id="rightPanelForm">
                    <p:poll global="false" interval="60" update="rightAccount" listener="#{homeBean.autoUpdateAction('right')}"
                            onstart="$(PrimeFaces.escapeClientId('rightPollStatus')).css('display','inline')"
                            oncomplete="$(PrimeFaces.escapeClientId('rightPollStatus')).css('display','none')"/>
                    
                    <p:treeTable id="rightAccount" value="#{homeBean.rightRoot}" var="file" resizableColumns="true"
                                 selectionMode="single" selection="#{homeBean.rightSelectedNode}">
                        <p:ajax event="expand" listener="#{homeBean.onNodeExpand}" update="rightAccount"/>
                        <p:ajax event="collapse" listener="#{homeBean.onNodeCollapse}"/>
                        <f:facet name="header">#{homeBean.rightAccount.provider.name} - #{homeBean.rightAccount.name}</f:facet>
                        <p:column>  
                            <f:facet name="header">Name</f:facet>
                            <f:verbatim rendered="#{file.folder}">
                                <span class="ui-treetable-toggler ui-icon ui-icon-folder-collapsed" />
                            </f:verbatim>
                            <f:verbatim rendered="#{!file.folder}">
                                <span class="ui-treetable-toggler ui-icon ui-icon-document" />
                            </f:verbatim>
                            <h:outputText value="#{file.name}" />  
                        </p:column>

                        <p:column>  
                            <f:facet name="header">Modified Date</f:facet>  
                            <h:outputText value="#{of:formatDate(file.modifiedDate, 'yyyy-MM-dd HH:mm:ss')}" />
                        </p:column>

                        <p:column width="50px">  
                            <f:facet name="header">Size</f:facet>  
                            <h:outputText value="#{of:formatBytes(file.size)}" />
                        </p:column>  

                        <p:column>  
                            <f:facet name="header">Kind</f:facet>  
                            <h:outputText value="Folder" rendered="#{file.folder}"/>
                            <h:outputText value="#{file.mimeType}"/>
                        </p:column>

                        <f:facet name="footer">
                            Total: #{of:formatBytes(homeBean.rightStorage.quotaBytesTotal)} - Used: #{of:formatBytes(homeBean.rightStorage.quotaBytesUsed)}
                        </f:facet>
                    </p:treeTable>
                </h:form>
            </p:outputPanel>
        </pe:layoutPane>
    </ui:define>
</ui:composition>